<template>
  <div class="set set1">
    <div class="set_ct">
      <Form ref="formValidate"
            :model="formDynamic"
            v-if="isForm"
            :label-width="100"
            class="set_ct_form set_ct_form02">
        <FormItem label="额度值（枚）:"
                  :prop="'item.' + index + '.value'"
                  v-for="(item,index) in formDynamic.item"
                  :rules="[{required: true, message: '额度值不能为空', trigger: 'blur'},{required: true, validator:validator
          , trigger: 'blur'}]"
                  :key="index">
          <Input v-model="item.value"
                 style="width:280px;"
                 :maxlength="4"
                 placeholder="输入范围1~9999之间"
                 @on-blur="priceBlur(index)"
                 @on-keyup="keyup(index)"></Input>
          <span class="set_ct_form_icon"
                v-if="formDynamic.item.length>1">
            <i class="iconsys icondel"
               title="删除"
               @click="handleRemove(index)">
            </i>
          </span>
          <span class="set_ct_form_icon"
                v-if="formDynamic.item.length===1||(formDynamic.item.length>1&&index===formDynamic.item.length-1)"
                @click="handleAdd(index)">
            <i class="iconsys iconadd"
               title="添加">
            </i>
          </span>
        </FormItem>
        <!-- <FormItem>
          <p v-if="formDynamic.item.length===10">最多可配置10个额度值</p>
          <p v-if="formDynamic.item.length < 7">最少保留6个额度值</p>
        </FormItem> -->
        <FormItem>
          <Button type="primary"
                  class="btn"
                  @click="handleSubmit">确认</Button>
          <Button class="btn"
                  style="margin-left:20px;"
                  @click="cancel">取消</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { getDicQuery, setDicSave } from '@/api/setting'
import { routeEqual } from '@/libs/util'
import './index.less'
export default {
  data () {
    return {
      title: '游戏币提取额度设置',
      resubmit: true,
      index: 0,
      isSubmit: true,
      iscompare: true,
      isAdd: true,
      idDelete: true,
      isValue: true,
      isForm: false,
      formDynamic2: [],
      formDynamic: {
        item: [{
          value: '50'
        }, {
          value: '100'
        }, {
          value: '150'
        }, {
          value: '200'
        }, {
          value: '300'
        }, {
          value: '500'
        }
        ]
      },
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('额度值不能为空'))
        } else if (!/^[1-9][0-9]{0,4}$/.test(value)) {
          callback(new Error('额度值输入范围为1~9999'))
        } else {
          callback()
        }
      }
    }
  },
  watch: {
  },
  computed: {
  },
  methods: {
    handleAdd () {
      if (this.isAdd) {
        if (!this.isAdd) {
          return
        }
        this.isAdd = false
        if (this.formDynamic.item.length === 10) {
          this.$Message.error(`额度输入框最多为10个`)
          setTimeout(() => {
            this.isAdd = true
          }, 1500)
          return false
        } else {
          setTimeout(() => {
            this.isAdd = true
            this.formDynamic.item.push({
              value: ''
            })
          }, 200)
        }
      }
    },
    cancel () {
      this.closeModal()
    },
    // 关闭弹窗
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'global_setting'
        })
      })
    },
    keyup (index) {
      this.formDynamic.item[index].value = this.formDynamic.item[index].value.replace(/^(0+)|[^\d]+/g, '')
    },
    priceBlur (index) {
      this.formDynamic.item[index].value = this.formDynamic.item[index].value.replace(/^(0+)|[^\d]+/g, '')
    },
    submitForm () {
      getDicQuery({
        'dictKeys': 'aioOutCoin',
        'merchantId': this.$store.state.user.merchantId,
        'msType': '0'
      }).then((res) => {
        if (res.data.status === 200) {
          if (res.data.data[0].aioOutCoin !== 0) {
            this.isForm = true
            res.data.data[0].aioOutCoin.split('|').forEach(ele => {
              this.formDynamic2.push({ value: ele })
            })
            this.formDynamic.item = this.formDynamic2
          } else {
            this.isForm = true
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    handleSubmit () {
      if (this.resubmit) {
        if (!this.resubmit) {
          return
        }
        this.resubmit = false
        setTimeout(() => {
          this.resubmit = true
        }, 1000)
        this.isSubmit = true
        this.iscompare = true
        this.isValue = true
        let arr = []
        this.formDynamic.item.forEach(ele => {
          arr.push(ele.value)
        })
        this.formDynamic.item.forEach(ele => {
          if (ele.value < 4 && ele.value) {
            this.isValue = false
          }
        })
        if (this.iscompare && this.isValue) {
          arr.sort((a, b) => a - b)
        }
        for (var i = 0; i < arr.length - 1; i++) {
          for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j] && arr[i] && arr[j]) {
              this.isSubmit = false
            }
          }
        }
        if (this.isSubmit && this.isValue) {
          this.$refs.formValidate.validate((val) => {
            if (val) {
              setDicSave({
                'aioOutCoin': arr.join('|'),
                'merchantId': this.$store.state.user.merchantId,
                'msType': '0'
              }).then(res => {
                if (res.data.status === 200) {
                  this.$Message.success('修改成功')
                  this.closeModal()
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }
          })
        } if (!this.isSubmit) {
          // setTimeout(() => {
          this.$Message.error(`游戏币额度相同，请重新输入`)
          // }, 200)
        } if (!this.isValue) {
          // setTimeout(() => {
          this.$Message.error(`游戏币额度必须大于3`)
          // }, 200)
        }
      }
    },
    // 按照属性值排序
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    handleRemove (index) {
      if (this.idDelete) {
        if (!this.idDelete) {
          return
        }
        this.idDelete = false
        if (this.formDynamic.item.length < 7) {
          this.$Message.error(`额度输入框最少为6个`)
          setTimeout(() => {
            this.idDelete = true
          }, 1500)
          return false
        } else {
          setTimeout(() => {
            this.formDynamic.item.splice(index, 1)
            this.idDelete = true
          }, 200)
        }
      }
    }
  },
  mounted () {
    this.submitForm()
    if (!this.hasPermission('moms:globalsetting:withdrawallimit')) {
      this.$router.replace({ name: 'error_401' })
    }
  }
}
</script>
<style lang="less">
.set1 {
  .set_ct {
    .set_ct_form {
      .set_ct_form_icon {
        display: inline-block;
        width: 24px;
        text-align: center;
        margin-left: 16px;
        .ivu-icon {
          font-size: 17px;
        }
      }
    }
    .set_ct_form02 {
      width: 500px !important;
    }
  }
}
</style>
